<template>
  <div class="style-selector">
    <label class="selector-label">样式风格:</label>
    <select v-model="selectedStyle" @change="handleStyleChange" class="style-dropdown">
      <option v-for="style in styleOptions" :key="style.value" :value="style.value">
        {{ style.label }}
      </option>
    </select>
  </div>
</template>

<script setup lang="ts">
import { ref, defineEmits, defineProps } from 'vue'

export type ItemStyleType = 'default' | 'poster' | 'card' | 'minimal' | 'timeline'

interface StyleOption {
  value: ItemStyleType
  label: string
  description: string
}

interface Props {
  modelValue: ItemStyleType
}

interface Emits {
  (e: 'update:modelValue', value: ItemStyleType): void
  (e: 'change', value: ItemStyleType): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const selectedStyle = ref<ItemStyleType>(props.modelValue || 'default')

const styleOptions: StyleOption[] = [
  { value: 'default', label: '默认风格', description: '简洁的卡片样式' },
  { value: 'poster', label: '海报风格', description: '诗意渐变背景，适合文艺内容' },
  { value: 'card', label: '卡片风格', description: '立体阴影效果，层次分明' },
  { value: 'minimal', label: '简约风格', description: '极简设计，专注内容' },
  { value: 'timeline', label: '时间线风格', description: '带有时间标记的线性样式' }
]

const handleStyleChange = () => {
  emit('update:modelValue', selectedStyle.value)
  emit('change', selectedStyle.value)
}

// 监听props变化
import { watch } from 'vue'
watch(() => props.modelValue, (newValue) => {
  selectedStyle.value = newValue || 'default'
})
</script>

<style scoped>
.style-selector {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.selector-label {
  font-size: 0.9rem;
  color: #666;
  font-weight: 500;
  white-space: nowrap;
}

.style-dropdown {
  padding: 0.4rem 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: white;
  color: #2c3e50;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  min-width: 100px;
}

.style-dropdown:hover {
  border-color: #42b883;
  background: #f9f9f9;
}

.style-dropdown:focus {
  outline: none;
  border-color: #42b883;
  box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.2);
}

/* 深色主题适配 */
.dark .selector-label {
  color: #b3b3b3;
}

.dark .style-dropdown {
  background: #2d2d2d;
  border-color: #4a4a4a;
  color: #e6e6e6;
}

.dark .style-dropdown:hover {
  background: #3d3d3d;
  border-color: #42b883;
}

.dark .style-dropdown:focus {
  border-color: #42b883;
  box-shadow: 0 0 0 2px rgba(66, 184, 131, 0.3);
}
</style>